<template>
  <FoldBox>
    <template #bd>
      <a-row style="margin-top: 8px">
        <a-col :span="6">展示类型</a-col>
        <a-col :span="18" style="text-align: right">
          <a-select
            v-model:value="lineConfig.stepType"
            @change="change"
            placeholder="请选择"
            size="small"
            style="width: 150px"
          >
            <a-select-option v-for="item in typeList" :key="item" :value="item">
              {{ item }}</a-select-option
            >
          </a-select>
        </a-col>
      </a-row>
      <a-row style="margin-top: 8px">
        <a-col :span="6">线宽度</a-col>
        <a-col :span="18" style="text-align: right">
          <a-input-number
            size="small"
            :min="1"
            v-model:value="lineConfig.lineStyle.lineWidth"
            @change="change"
            label="数字"
          />
        </a-col>
      </a-row>
    </template>
  </FoldBox>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import FoldBox from '../_source/foldBox.vue';
  import { cloneDeep } from 'lodash';

  export default defineComponent({
    components: { FoldBox },
    props: {
      config: {
        type: Object,
      },
    },
    data() {
      return {
        typeList: ['hv', 'vh', 'hvh', 'vhv'],

        lineConfig: {
          // 类型
          stepType: '',

          // 折线图形样式
          lineStyle: {
            lineWidth: 2,
          },
        },
      };
    },

    created() {
      this.init();
    },

    methods: {
      init() {
        this.lineConfig = cloneDeep(this.config);
      },

      change() {
        this.$emit('change', this.lineConfig);
      },
    },
  });
</script>
